<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>慢慢买凑单品</title>
    <link rel="stylesheet" href="../../lib/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../css/base.css"/>
    <link rel="stylesheet" href="../../css/coudanpin/coudanpin.css"/>
</head>
<body>
    <!--顶部条-->
    <div class="header-bar">
        <div class="header-left"><a class="glyphicon glyphicon-menu-left" href="../../index.html"></a></div>
        <div class="header-center">凑单品</div>
        <div class="header-right"></div>
    </div>

    <!--搜索选项栏-->
    <div class="option-box">
        <div class="options">
            <div class="shop col-xs-4">
                <div class="shop-now"><i class="glyphicon glyphicon-triangle-bottom"></i></div>
            </div>
            <div class="area col-xs-4">
                <div class="area-now"></div>
            </div>
            <div class="price col-xs-4">
                <div class="price-now">全部价格<i class="glyphicon glyphicon-triangle-bottom"></i></div>
            </div>

        </div>
        <div class="searchBtn glyphicon glyphicon-search"></div>
    </div>
    <!--选项栏的选项们-->
    <div class="options-list">

        <div class="shop-list">
            <ul id="shop-list">

                <script type="text/html" id="shop">

                    {{ each list as type }}
                    <li shopId={{ type.shopId }}>{{ type.shopName }}</li>
                    {{ /each }}

                </script>

            </ul>
        </div>

        <div class="area-list">
            <ul id="area-list">

                <script type="text/html" id="area">

                    {{ each list as type }}
                    <li areaId={{ type.areaId }}>{{ type.areaName }}</li>
                    {{ /each }}

                </script>

            </ul>
        </div>

        <div class="price-list">
            <ul>
                <li>1-3元<i class="glyphicon glyphicon-ok"></i></li>
                <li>3-5元</li>
                <li>5-10元</li>
                <li>10-15元</li>
                <li>15元以上</li>
            </ul>
        </div>
    </div>

    <!--商品栏-->
    <div class="product-box">
        <ul class="clearfix" id="product-box">

            <script type="text/html" id="product">

                {{ each list as type i }}
                <li class="col-xs-6" productId={{ type.productId }}>
                    <a class="pro-box" href="">
                        <div class="img-box">
                            {{ if i<6 }}
                            <img  src="{{ type.productImg }}" alt=""/>
                            {{ else }}
                            <img class="lazy" data-original="{{ type.productImg }}" alt=""/>
                            {{ /if }}
                        </div>
                        <div class="pro-content">{{ type.productName }}</div>
                        <p class="pro-price">
                            <span>{{ type.productPrice.slice(0,1) }}</span>{{ type.productPrice.slice(1,-1) }}</p>
                    </a>
                </li>
                {{ /each }}

            </script>

        </ul>
    </div>

    <script src="../../lib/jquery/jquery.min.js"></script>
    <script src="../../lib/artTemplate-3.0.1/template.js"></script>
    <script src="../../lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../lib/jquery_lazyload-1.9.5/jquery.lazyload.min.js"></script>
    <script src="../../js/coudanpin/coudanpin.js"></script>

</body>
</html>